<template>
  <div class="detail-title-wrap">
    <div class="detail-title-container ">

      <div class="detail-item-Name van-multi-ellipsis--l2"
           v-if="checkstatus"
           @click="$router.push({name: 'audit', query: {id, beanId, checkstatus}})">
        <span class="detail-item-status"
              :style="{background: checkColor(checkstatus)}">{{checkstatus}}</span>
        {{title}}
      </div>
    </div>
    <float-ball @click="show = !show"
                v-if="isCanCheck">
      <template #content>
        <div class="float-ball-content">
          审
        </div>
      </template>
    </float-ball>
    <pop position="bottom"
         :style="{ height: '200px', width: '100%' }">
      <template #content>
        <div class="audit-content">
          <van-field v-model="checkInfo"
                     rows="4"
                     autosize
                     label=""
                     type="textarea"
                     placeholder="请输入审核意见"
                     maxlength="500"
                     show-word-limit />
        </div>
        <div class="audit-tools">

          <van-button icon="clear"
                      color="#cccccc"
                      block
                      @click="doAudit('tovoid')">
            作废
          </van-button>
          <van-button icon="clear"
                      color="#ee3845"
                      block
                      @click="doAudit('refuse')">不通过</van-button>

          <van-button icon="checked"
                      color="#2494f2"
                      block
                      @click="doAudit('pass')">通过</van-button>

        </div>
      </template>
    </pop>
  </div>
</template>

<script>
import { toRefs, reactive, provide, inject, onBeforeMount, nextTick, computed } from 'vue'
import { Toast } from 'vant'
import FloatBall from '@/components/FloatBall.vue'
import Pop from '@/components/Pop.vue'
import { audit, getBasic } from '@/api/request/business'
export default {
  props: {
    // 头部展示名称，一般为项目或成果的名称
    itemName: {
      type: String,
      required: false,
      default: ''
    },
    itemStatus: {
      type: String,
      required: false,
      default: ''
    }
  },
  components: {
    FloatBall,
    Pop
  },
  setup (props, { emit }) {
    const popState = reactive({
      show: false,
      checkInfo: '',
      checkstatus: '',
      title: '',
      isCanCheck: false
    })
    provide('popState', popState)
    const beanId = inject('beanId')
    const id = inject('id')
    const checkColor = computed(() => {
      return (checkStatus) => {
        switch (checkStatus) {
          case '审核中':
            return '#FF8B36'
          case '审核通过':
            return '#28BA8E'
          case '审核不通过':
            return '#EA2F2F'
          default:
            break;
        }
        return 'gray'
      }
    })
    onBeforeMount(async () => {
      const response = await getBasic({ beanId, id })
      const { checkstatus, title, isCanCheck } = response.body.data
      popState.checkstatus = checkstatus
      popState.title = title
      popState.isCanCheck = isCanCheck
      nextTick(() => {
        emit('refreshOffset')
      })
    })
    const doAudit = (checkType) => {
      if (!popState.checkInfo && checkType !== 'pass') {
        Toast('请输入审核意见')
        return false
      }
      Toast.loading({
        message: '审核中...',
        forbidClick: true,
        duration: 0
      })
      audit({ beanId, id, checkType, checkInfo: popState.checkInfo }).then(res => {
        if (res.body.code !== '200') {
          Toast.fail({ message: '审核失败' })
          return false
        }
        Toast.success({ message: '审核成功' })
        popState.show = false
        // 刷新状态
      })
    }
    return {
      ...toRefs(popState),
      doAudit,
      id,
      beanId,
      checkColor
    }
  }
}
</script>

<style scoped>
/* fixed文档流占位 */
.detail-title-wrap {
  width: 100vw;
  /* height: 80px; */
}

/*  */
.detail-title-container {
  /* position: fixed; */
  /* top: 44px; */
  font-size: 16px;
  color: #000000;
  font-weight: bold;
  padding: 12px;
}
.detail-item-status {
  background: #ff8b36;
  color: #fff;
  font-size: 12px;
  font-weight: normal;
  padding: 2px 8px;
  margin-right: 12px;
}

.detail-item-Name {
}

.audit-tools {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 44px;
}

.audit-content {
  position: fixed;
  bottom: 44px;
  width: 100%;
  height: auto;
}
.audit-tools > button {
  width: 33.3%;
  display: inline;
}

.detail-item-Name:hover {
  background: #f7f7f7;
}
</style>